import React from 'react';
import { Table, Button, Card, Tag, Space } from 'antd';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './styles.css';

// 模拟数据
const mockRules = [
  {
    id: 1,
    name: '数据隐私与保护',
    description: '监控和保护数据隐私，防止敏感信息泄露',
    type: '隐私保护',
    status: 'active',
    ruleCount: 8,
    lastExecuteTime: '2024-03-18 14:30:00',
    riskLevel: 'high',
  },
  {
    id: 2,
    name: '数据交易审计',
    description: '审计数据交易流程，确保交易合规性',
    type: '交易监管',
    status: 'active',
    ruleCount: 12,
    lastExecuteTime: '2024-03-18 15:20:00',
    riskLevel: 'medium',
  },
  {
    id: 3,
    name: '合规性审查',
    description: '确保数据处理和使用符合相关法律法规',
    type: '合规监管',
    status: 'active',
    ruleCount: 15,
    lastExecuteTime: '2024-03-18 16:10:00',
    riskLevel: 'medium',
  },
  {
    id: 4,
    name: '数据质量保证',
    description: '监控数据质量，确保数据的准确性和完整性',
    type: '质量监控',
    status: 'active',
    ruleCount: 10,
    lastExecuteTime: '2024-03-18 13:45:00',
    riskLevel: 'low',
  },
  {
    id: 5,
    name: '数据非法交易',
    description: '识别和预防数据非法交易行为',
    type: '风险防控',
    status: 'active',
    ruleCount: 6,
    lastExecuteTime: '2024-03-18 12:30:00',
    riskLevel: 'high',
  },
];

const RuleList: React.FC = () => {
  const navigate = useNavigate();

  const columns = [
    {
      title: '模型名称',
      dataIndex: 'name',
      key: 'name',
      render: (text: string, record: any) => (
        <a onClick={() => navigate('/monitoring/rule-config/' + record.id)}>{text}</a>
      ),
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => <Tag color="blue">{type}</Tag>,
    },
    {
      title: '规则数量',
      dataIndex: 'ruleCount',
      key: 'ruleCount',
    },
    {
      title: '风险等级',
      dataIndex: 'riskLevel',
      key: 'riskLevel',
      render: (level: string) => {
        const colors = {
          high: 'red',
          medium: 'orange',
          low: 'green',
        };
        return <Tag color={colors[level as keyof typeof colors]}>{level.toUpperCase()}</Tag>;
      },
    },
    {
      title: '最近执行时间',
      dataIndex: 'lastExecuteTime',
      key: 'lastExecuteTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<SettingOutlined />}
            onClick={() => navigate('/monitoring/rule-config/' + record.id)}
          >
            配置
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="rule-list">
      <Card
        title="监管模型列表"
        extra={
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => navigate('/monitoring/rule-config/add')}
          >
            新建模型
          </Button>
        }
      >
        <Table columns={columns} dataSource={mockRules} rowKey="id" />
      </Card>
    </div>
  );
};

export default RuleList; 